<template>
	<view class="cart-car" v-if="cart.length">
    <!-- 收货地址 -->
    <my-address />
		<!-- 标题 -->
    <view class="cart-title">
      <uni-icons type="shop" size="18"></uni-icons>
      <text class="cart">购物车</text>
    </view>
    <!-- 购物车列表 -->
    <uni-swipe-action >
      <uni-swipe-action-item  v-for="(item,index) in cart" :key="index"  :right-options="options"  @click="onClick($event,item)" >
        <my-goods :showRadio="true" @radio-change="radioHandle" :good="item" :showCheck="true" @numChange="checkHandl"/>
       </uni-swipe-action-item>
    </uni-swipe-action>
    <!-- 结算页面 -->
    <my-settel />
	</view>
  
  <view class="cart-empty" v-else>
    <image src="../../static/cart_empty@2x.png" class="aaaa"></image>
    <view class="">
      空空如也
    </view>
  </view>
</template>

<script>
  // import { mapGetters } from 'vuex'
  import tabBarSet from '@/mixins/tabBarSet.js'
  import { mapState, mapMutations } from 'vuex'
	export default {
    mixins:[tabBarSet], // 执行mixin里面的代码，设置购物车总数
    computed:{
      ...mapState('mcart', ['cart'])
    },
		data() {
			return {
         options: [
           {
             text: '删除',
             style: {backgroundColor: '#dd524d'}
           }
         ]
				}
			
		},
    onShow () {
    },
		methods: {
      ...mapMutations('mcart', ['updateGoodsState','updateGoodsCheck','deleteGood']),
      radioHandle (e) { // 接收组件内部传来的数据，修改radio状态
        this.updateGoodsState(e) // 调用store中的方法，修改store中保存购物车数据的数组中的radio，修改后又会转存storage
      },
      checkHandl (e) { // 修改checkbox
        this.updateGoodsCheck(e)
      },
      onClick (e, item) {
        if (e.position === 'right') {
          this.deleteGood({
            goods_id: item.goods_id
          })
        }
      }
		}
	}
</script>

<style>
.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
}
.cart {
      margin-left: 5px;
    }
.cart-car {
  padding-bottom: 50px;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  
}
.aaaa {
     width: 100px;
     height: 100px;
     margin-bottom: 10px;
   }
</style>
